<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org" xmlns:layui
      th:replace="pages/common/main :: layout(~{}, ~{::section}, ~{}, ~{::script})">
    <head>
    </head>
    <body>
        <section>

            <div class="layui-fluid">

                <script type="text/html" id="toolBar">
                    <a class="layui-btn layui-btn-normal layui-btn-sm" lay-event="create" layui:auth="/sys/permission/add">
                        <i class="layui-icon layui-icon-file-b"> 新增权限</i>
                    </a>
                   <a class="layui-btn layui-btn-danger layui-btn-sm" lay-event="deleteBatch" layui:auth="/sys/permission/batch-delete">
                        <i class="layui-icon layui-icon-delete"> 批量删除</i>
                    </a>

                    <a class="layui-btn layui-btn-info layui-btn-sm" lay-event="scan" layui:auth="/sys/permission/scan">
                        <i class="layui-icon layui-icon-search"> 扫描权限节点</i>
                    </a>
                </script>

                <script type="text/html" id="tool">
                    <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="delete" layui:auth="/sys/permission/delete">删除</a>
                </script>

                <!-- 表单弹窗，注意这里要用script包起来 -->
                <script type="text/html" id="modelUser">
                    <form id="modelUserForm" lay-filter="modelUserForm" class="layui-form model-form">
                        <div class="layui-form-item">
                            <label class="layui-form-label">名称</label>
                            <div class="layui-input-block">
                                <input name="name" class="layui-input" placeholder="请输入名称" lay-verType="tips"
                                       lay-verify="required" required/>
                            </div>
                        </div>
                        <div class="layui-form-item">
                            <label class="layui-form-label">描述</label>
                            <div class="layui-input-block">
                                <textarea name="description" placeholder="请输入内容" class="layui-textarea"></textarea>
                            </div>
                        </div>
                        <div class="layui-form-item text-right">
                            <button class="layui-btn layui-btn-primary" type="button" ew-event="closeDialog">取消</button>
                            <button class="layui-btn" lay-filter="modelSubmitUser" lay-submit>保存</button>
                        </div>
                    </form>
                </script>

                <script type="text/html" id="scanPermission">
                    <form id="scanPermissionForm" lay-filter="scanPermissionForm" class="layui-form model-form">
                        <div class="layui-form-item">
                            <label class="layui-form-label">包过滤前缀</label>
                            <div class="layui-input-block">
                                <input name="filter" class="layui-input" placeholder="请输入包过滤名" lay-verType="tips"
                                       lay-verify="required" required/>
                            </div>
                        </div>
                        <div class="layui-form-item text-right">
                            <button class="layui-btn layui-btn-primary" type="button" ew-event="closeDialog">取消</button>
                            <button class="layui-btn" lay-filter="scanPermission" lay-submit>保存</button>
                        </div>
                    </form>
                </script>

                <div class="layui-card">
                    <div class="layui-card-body">
                        <table id="permission-table" lay-filter="permission-table-filter"></table>
                    </div>
                </div>

            </div>

        </section>

        <script th:inline="javascript">

            layui.use(["grid", "form", "ax", "dtree", "admin", "jquery"], function () {
                var grid = layui.grid,
                    form = layui.form,
                    admin = layui.admin,
                    $ = layui.jquery,
                    $ax = layui.ax,
                    col = [
                        {type: "numbers"},
                        {type: "checkbox"},
                        {field: "name", title: "名称"},
                        {field: "description", title: "描述"},
                        {field: "rule_name", title: "规则名称"},
                        {field: "data", title: "规则"},
                        {toolbar: "#tool", title: "操作"}
                    ],
                    data = /*[(${data})]*/[],
                    options = {
                        tableId: "permission-table",
                        tableFilter: "permission-table-filter",
                        table: {
                            // url: Kong.ctxPath + "/sys/permission-list",
                            // method: "post",
                            cols: [col]
                            , data: data
                            /*, limits: [5, 7, 10]
                            , limit: 1 //每页默认显示的数量*/
                        },
                        editor: {
                            url: Kong.ctxPath + "/sys/permission/edit"
                        },
                        eventOptions: {
                            deleteBatch: {
                                url: "/sys/permission/batch-delete",
                                condition: "name",
                                after: function (obj, param, that) {
                                    admin.refresh()
                                }
                            },
                            update: {
                                url: "/sys/permission/form"
                            },
                            delete: {
                                url: Kong.ctxPath + "/sys/permission/delete",
                                condition: "name",
                                after: function (obj, param, that) {
                                    admin.refresh()
                                }
                            }
                        }
                    },
                    events = {
                        create: function (obj, config, that) {
                            showEditModel("新增权限", Kong.ctxPath + "/sys/permission/add", that, false)
                        },
                        scan: function (obj, config, that) {
                            showScanModel("扫描权限节点", Kong.ctxPath + "/sys/permission/scan", that, false);
                        }
                        /*update: function (obj, config, that) {
                            showEditModel("修改权限", Kong.ctxPath + "/sys/permission/update", that, obj.data)
                        }*/
                    };

                grid.render(options, events);


                // 显示表单弹窗
                function showScanModel(title, url, insTb, obj) {
                    admin.open({
                        type: 1,
                        title: title,
                        content: $('#scanPermission').html(),  // 注意这里有.html()
                        success: function (layero, dIndex) {
                            // 表单提交事件
                            form.on('submit(scanPermission)', function (data) {
                                layer.load(2);
                                var ajax = new $ax(url, function (res) {
                                    layer.close(dIndex);
                                    layer.msg(res.msg, {icon: 1});
                                    admin.refresh()
                                }, function (res) {
                                    layer.msg(res.msg, {icon: 2});
                                })
                                ajax.setData(data.field)
                                ajax.send();
                                return false;
                            });
                        }
                    });
                }


                // 显示表单弹窗
                function showEditModel(title, url, insTb, obj) {
                    admin.open({
                        type: 1,
                        title: title,
                        content: $('#modelUser').html(),  // 注意这里有.html()
                        success: function (layero, dIndex) {
                            form.val('modelUserForm', obj);  // 回显数据
                            // 表单提交事件
                            form.on('submit(modelSubmitUser)', function (data) {
                                layer.load(2);
                                var ajax = new $ax(url, function (res) {
                                    layer.close(dIndex);
                                    layer.msg(res.msg, {icon: 1});
                                    admin.refresh()
                                    // insTb.config.inst.reload();  // 保存成功刷新表格
                                }, function (res) {
                                    layer.msg(res.msg, {icon: 2});
                                })
                                ajax.setData(data.field)
                                ajax.send();
                                return false;
                            });
                        }
                    });
                }

            });

        </script>


    </body>
</html>
